<div class="amplify-flex amplify-field amplify-checkboxfield">
  <label class="amplify-flex amplify-checkbox">
    <span class="amplify-visually-hidden">
      <input
        (click)="handleClick()"
        class="
          amplify-input
          amplify-field-group__control
          amplify-checkbox__input
        "
        aria-invalid="false"
        type="checkbox"
        [name]="name"
        [value]="value"
      />
    </span>
    <span
      class="amplify-flex amplify-checkbox__button"
      aria-hidden="true"
      data-focus="false"
      [ngClass]="{
        'amplify-checkbox__button--error': hasError
      }"
      [attr.data-error]="hasError"
      [attr.data-checked]="isChecked"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="amplify-icon amplify-checkbox__icon"
        viewBox="0 0 24 24"
        fill="currentColor"
        [attr.data-checked]="isChecked"
        [ngClass]="{
          'amplify-checkbox__icon--checked': isChecked
        }"
      >
        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
      </svg>
    </span>
    <span class="amplify-text amplify-checkbox__label">
      <ng-content></ng-content>
    </span>
  </label>
  <p *ngIf="hasError" class="amplify-text amplify-field__error-message">
    {{ errorMessage }}
  </p>
</div>
